<template>
	<view class="updatePassword">
		<uni-forms :model="formData" label-position="left" ref="form" :rules="rules">
			<uni-forms-item label="旧密码" name="oldPassword">
				<uni-easyinput :disabled="isLoading" type="text" v-model="formData.oldPassword" placeholder="请输入旧密码" />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="newPassword">
				<uni-easyinput :disabled="isLoading" type="text" v-model="formData.newPassword" placeholder="请输入新密码" />
			</uni-forms-item>
			<uni-forms-item>
				<button type="primary" :disabled="isLoading" @click="submit" class="w100">
					提交
				</button>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					oldPassword: "",
					newPassword: "",
				},
				isLoading: false,
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入旧密码',
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码',
						}]
					},
				}
			}
		},
		methods: {
			async uploadForm() {
				const data = {
					...this.formData
				}
				this.isLoading = true
				try {
					const res = await this.$request.request({
						url: this.$api.updatePassword,
						data: JSON.stringify(data),
						header: this.$aplsjsonheader,
						isToast: true,
					});
					this.isLoading = true
					this.reset()
				} catch (e) {
					this.isLoading = false
					this.$errMessageToast(e)
				}
			},
			reset() {
				this.formData = {
					oldPassword: "",
					newPassword: "",
				}
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.formData = res
					this.$nextTick(() => {
						this.uploadForm()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.updatePassword {
		padding: 20rpx 20rpx 15rpx 20rpx;
		background-color: #fff;
		height: auto;
	}
</style>
